<template>
  <el-scrollbar height = "700px">
    <el-form :model = "formInfo" :rules = "rules" class = "dynamic-form" label-position = "top" ref = "itemFormInfo"
             size = "small">
      <el-form-item label = "表单名称" prop = "formName" required>
        <el-input placeholder = "请输入表单名称" v-model = "formInfo['formName']"/>
      </el-form-item>
      <el-form-item label = "标签长度" prop = "labelWidth" required>
        <el-input placeholder = "请输入标签长度例如 '50px'" v-model = "formInfo['labelWidth']"/>
      </el-form-item>
      <el-form-item label = "标签位置" prop = "labelPosition">
        <el-select placeholder = "请选择标签位置" v-model = "formInfo['labelPosition']">
          <el-option label = "left" value = "left"/>
          <el-option label = "right" value = "right"/>
          <el-option label = "top" value = "top"/>
        </el-select>
      </el-form-item>

      <el-form-item label = "表单验证规则名称" prop = "rules">
        <el-input placeholder = "请输入表单验证规则名称" v-model = "formInfo['rules']"/>
      </el-form-item>
      <el-form-item label = "表单域标签的后缀" prop = "labelSuffix">
        <el-input placeholder = "请输入表单域标签的后缀" v-model = "formInfo['labelSuffix']"/>
      </el-form-item>
      <el-form-item label = "行内表单模式" prop = "inline">
        <el-switch :active-value = "true" :inactive-value = "false" active-text = "是" inactive-text = "否"
                   v-model = "formInfo['inline']"/>
      </el-form-item>
      <el-form-item label = "是否禁用该表单内的所有组件" prop = "disabled">
        <el-switch :active-value = "true" :inactive-value = "false" active-text = "是" inactive-text = "否"
                   v-model = "formInfo['disabled']"/>
      </el-form-item>
      <el-form-item label = "是否隐藏必填字段标签旁边的红色星号" prop = "hideRequiredAsterisk">
        <el-switch :active-value = "true" :inactive-value = "false" active-text = "是"
                   inactive-text = "否"
                   v-model = "formInfo['hideRequiredAsterisk']"/>
      </el-form-item>
      <el-form-item label = "当校验失败时，滚动到第一个错误表单项" prop = "scrollToError">
        <el-switch :active-value = "true" :inactive-value = "false" active-text = "是"
                   inactive-text = "否"
                   v-model = "formInfo['scrollToError']"/>
      </el-form-item>
      <el-form-item label = "星号的位置" prop = "requireAsteriskPosition">
        <el-switch :active-value = "left" :inactive-value = "right" active-text = "左"
                   inactive-text = "右"
                   v-model = "formInfo['requireAsteriskPosition']"/>
      </el-form-item>
      <el-form-item label = "是否在输入框中显示校验结果反馈图标" prop = "statusIcon">
        <el-switch :active-value = "true" :inactive-value = "false" active-text = "是" inactive-text = "否"
                   v-model = "formInfo['statusIcon']"/>
      </el-form-item>
      <el-form-item label = "是否显示校验错误信息" prop = "showMessage">
        <el-switch :active-value = "true" :inactive-value = "false" active-text = "是" inactive-text = "否"
                   v-model = "formInfo['showMessage']"/>
      </el-form-item>
      <el-form-item label = "是否以行内形式展示校验信息" prop = "inlineMessage">
        <el-switch :active-value = "true" :inactive-value = "false" active-text = "是" inactive-text = "否"
                   v-model = "formInfo['inlineMessage']"/>
      </el-form-item>
      <el-form-item label = "是否在 rules 属性改变后立即触发一次验证" prop = "validateOnRuleChange">
        <el-switch :active-value = "true" :inactive-value = "false" active-text = "是"
                   inactive-text = "否"
                   v-model = "formInfo['validateOnRuleChange']"/>
      </el-form-item>
    </el-form>
    <div style = "height: 50px"/>
  </el-scrollbar>
</template>

<script>
import {inject, ref} from "vue";

export default {
  name: "FormPropertyPanel",
  setup() {
    let formInfo = inject("formInfo");
    let activeName = ref("first");
    let rules = ref({});
    return {
      formInfo, activeName, rules
    }
  }
}
</script>

<style lang = "scss" scoped>
.dynamic-form {
  width: 270px;
}
</style>
